<template>
	<div class="">
		<div class="crumbs">
			<h2 class="">机构导航设置</h2>
		</div>
		<div class="container ">
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column type="expand">
					<template slot-scope="props">
						<div class="padding-left20 padding-right20 margin-top20">
							<el-table :data="props.row.children" class="table1" style="width: 100%">
								<el-table-column label="市" align="center">
									<template slot-scope="scope">{{scope.row.name}}</template>
								</el-table-column>
								<el-table-column label="" align="center">
									<template slot-scope="scope">
										<el-switch v-model="scope.row.off"
											@click.native="switchChange2(scope.row,scope.row.off)"></el-switch>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="省" align="center"></el-table-column>
				<el-table-column prop="name" label="" align="center">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.off" @click.native="switchChange1(scope.row,scope.row.off)"></el-switch>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageNumber"
					:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'categoryTable',
		data() {
			return {
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				tableData: [],
				multipleSelection: [],
				editVisible: false,
				pageTotal: 0,

			};
		},
		created() {
			// this.getData();
			this.getProvinceWay();
		},
		methods: {
			// 递归移除第4层children
			getTreeData(data) {
				// 循环遍历json数据
				for (var i = 0; i < data.length; i++) {
					if (data[i].level == 2) { //等于3的时候把第4层children-设为-undefined
						// children若为空数组，则将children设为undefined
						data[i].children = undefined;
						//状态1开启0关闭
						if (data[i].cityStatus == 1) {
							data[i].off = true;
						} else {
							data[i].off = false;
						}
					} else {
						if (data[i].cityStatus == 1) {
							data[i].off = true;
						} else {
							data[i].off = false;
						}
						// children若不为空数组，则继续 递归调用 本方法
						this.getTreeData(data[i].children);
					}
				}
				return data;
			},
			// 获取省市区
			getProvinceWay() {
				this.$get('/admin/area/getProvinceCity', {}).then((res) => {
					if (res.code == 1000) {
						this.tableData = this.getTreeData(res.data); //获取树结构值
					}
				}).catch((error) => {
					console.log(error)
				})
			},
			switchChange1(row, type) {
				console.log(type, 'rowrowrow');
				if (type == true) {
					console.log(type, '我要去打开')
					row.cityStatus = 1;

				} else {
					console.log(type, '我要去关闭')
					row.cityStatus = 0;
				}
				var obj = {
					"adcode": row.adcode,
					"cityStatus": row.cityStatus,
					"id": row.id,
					"level": row.level,
					"parentId": row.parentId,
				}
				this.$post('/admin/area/cityUpdate', obj).then((res) => {
					if (res.code == 1000) {
						// this.getProvinceWay();
						if (type == true) {
							console.log(type, '我要去打开')
							row.children.forEach((item, index) => {
								item.cityStatus = 1;
								item.off = true;
							});

						} else {
							row.children.forEach((item, index) => {
								item.cityStatus = 0;
								item.off = false;
							});
						}

					}
				}).catch((error) => {
					console.log(error)
				})
			},
			switchChange2(row, type) {
				console.log(type, 'rowrowrow');
				if (type == true) {
					console.log(type, '我要去打开')
					row.cityStatus = 1;

				} else {
					console.log(type, '我要去关闭')
					row.cityStatus = 0;
				}
				var obj = {
					"adcode": row.adcode,
					"cityStatus": row.cityStatus,
					"id": row.id,
					"level": row.level,
					"parentId": row.parentId,
				}
				this.$post('/admin/area/cityUpdate', obj).then((res) => {
					if (res.code == 1000) {
						this.getProvinceWay();
					}
				}).catch((error) => {
					console.log(error)
				})
			},
			// 获取 easy-mock 的模拟数据
			getData() {
				this.tableData = [{
					id: 1,
					name: '山东',
					off: false,
					list: [{
						id: 2,
						name: '青岛',
						off: false,
					}]
				}, {
					id: 3,
					name: '北京',
					off: false,
					list: [{
						id: 4,
						name: '北京',
						off: false,
					}]
				}]
				return
				this.$postForm('/admin/label/labelAll', this.query).then((res) => {
					if (res.code == 1000) {
						this.$forceUpdate(); //强制刷新
						this.tableData = res.data.list
						this.pageTotal = res.data.totalRow
					}
				}).catch((error) => {
					console.log(error)
				})

			},
			// 触发搜索按钮
			handleSearch() {
				this.$set(this.query, 'pageNumber', 1);
				this.getData();
			},
			// 点击重置
			resetClick() {
				this.query = {};
				this.$set(this.query, 'pageNumber', 1);
				this.getData();
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageNumber', val);
				this.getData();
			}
		}
	};
</script>

<style>
</style>